import type { Directive, DirectiveBinding } from 'vue'
const move: Directive = {
     mounted(el: HTMLElement, binding: DirectiveBinding) {
          const moveEl = el.firstElementChild as HTMLElement
          const mouseDown = (e: MouseEvent) => {
               if (binding.value) {
                    // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                    const X = e.clientX - el.offsetLeft
                    const Y = e.clientY - el.offsetTop
                    const move = (e: MouseEvent) => {
                         el.style.left = e.clientX - X + 'px'
                         el.style.top = e.clientY - Y + 'px'
                    }
                    document.addEventListener('mousemove', move)
                    document.addEventListener('mouseup', () => {
                         document.removeEventListener('mousemove', move)
                    })
               }
          }
          moveEl.addEventListener('mousedown', mouseDown)
     },
}
export default move
